<template>
  <div class="login-header">
    <div class="left">
      <img class="logo" src="@/assets/img/login/text-title.png" />
    </div>
    <div v-if="token" class="right">
      <div>
        <a-badge :count="1" :overflow-count="99">
          <i class="iconfont icon-notification-fill"></i>
        </a-badge>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { storage } from 'g6-fn'

  const token = storage.get('token')
</script>

<style lang="less" scoped>
  .login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 44px;
    background: @background1;
    box-shadow: 0px 1px 3px rgba(37, 37, 45, 0.16);

    .right {
      .fc();
      gap: 0 26px;
      cursor: pointer;
    }

    .ant-dropdown-link {
      display: flex;
      gap: 0 8px;
      cursor: pointer;

      > i {
        .font18();
      }

      .round {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        color: @primary1;
        background: rgba(24, 104, 233, 0.1);
        border-radius: 50%;
        .font12();
      }
    }

    .logo {
      width: 168px;
      height: 20px;
    }
  }
</style>
